<!--
 * @Author: XY
 * @Date: 2023-11-10 16:59:58
 * @LastEditors: XY
 * @LastEditTime: 2023-11-20 20:26:13
 * @FilePath: \friendsApp\see_you\src\components\overlayPop.vue
 -->
 <template>
  <div class="popup">
    <!-- 微信/手机号 -->
    <van-overlay
      v-if="infoType.type == 'wx' || infoType.type == 'phone'"
      :show="showOverlayPop"
      @click="show"
    >
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="block-icon"><img :src="infoType.icon" alt="" /></div>
          <div class="block-name">{{ infoType.title }}</div>
          <div class="block-number">
            {{ infoType.type == 'wx' ? infoType.wechat : infoType.phone }}
          </div>
          <div
            class="block-btn"
            v-copy="infoType.type == 'wx' ? infoType.wechat : infoType.phone"
          >
            复制{{ infoType.title }}
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- vip -->
    <van-overlay
      v-if="infoType.type == 'vip'"
      :show="showOverlayPop"
      @click="show"
    >
      <div class="wrapper">
        <div
          @click.stop
          class="block"
          style="background: linear-gradient(180deg, #ffe5cc 0%, #ffffff 100%)"
        >
          <div class="image-text_1 flex-col">
            <img
              class="image_1"
              referrerpolicy="no-referrer"
              src="@/assets/detail/vip.png"
            />
            <span class="text-group_1">会员VIP-尊享超级特权</span>
          </div>
          <span class="text_1">VIP每日最多可打招呼xx人</span>
          <div class="text-wrapper_1 flex-col">
            <span class="text_2" @click.stop="goPage">购买会员，免费解锁</span>
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- share -->
    <van-overlay
      v-if="infoType.type == 'share'"
      :show="showOverlayPop"
      @click="show"
    >
      <div class="wrapper">
        <div class="block">
          <div class="block-shareTitle">分享</div>
          <div class="block-shareBox">
            <div class="block-shareBox-wx">
              <img
                referrerpolicy="no-referrer"
                src="@/assets/detail/wechat.png"
              />
              <span>微信好友</span>
            </div>
            <div class="block-shareBox-friends">
              <img
                referrerpolicy="no-referrer"
                src="@/assets/detail/share-pyq.png"
              />
              <span>朋友圈</span>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: 'popup',
  props: {
    showOverlayPop: {
      type: Boolean,
      default: false,
    },
    infoType: {
      type: Object,
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    goPage() {
      // this.$router.push({ path: '/vip/info' })
       window.location.href='https://www.seyou1.vip/h5/member?token='+md5('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhcGkuc2V5b3UxLnZpcCIsImF1ZCI6ImFwaS5zZXlvdTEudmlwIiwiaWF0IjoxNzAxOTM1NzcxLCJuYmYiOjE3MDE5MzU3NzEsImV4cCI6MTcwNDUyNzc3MSwianRpIjp7ImlkIjoxOTc4LCJ0eXBlIjoiYXBpIn19.82iI5LJuGUPU6_FH8UenvzupiJAenbRS3JlV6YfDSSA')
    },
    show() {
      console.log(this.$parent)
      this.$parent.showOverlayPop = false
    },
  },
}
</script>

<style scoped lang="scss">
.image-text_1 {
  text-align: center;
}

.image_1 {
  width: 100px;
  height: 91px;
  margin: 0 31px 0 32px;
}

.text-group_1 {
  overflow-wrap: break-word;
  color: rgba(26, 26, 26, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 16px;
  margin-top: 7px;
}

.text_1 {
  overflow-wrap: break-word;
  color: rgba(118, 118, 118, 1);
  font-size: 12px;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 12px;
  align-self: center;
  margin-top: 14px;
}

.text-wrapper_1 {
  background-color: rgba(26, 26, 26, 1);
  border-radius: 8px;
  margin-top: 33px;
  padding: 14px 48px 14px 48px;
}

.text_2 {
  overflow-wrap: break-word;
  color: rgba(255, 229, 204, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 16px;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 40px;
  margin: 20px;
  width: 100%;
  &-icon {
    width: 60px;
    height: 60px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-name {
    font-size: 14px;
    font-weight: 400;
    color: #767676;
    line-height: 40px;
  }
  &-number {
    font-size: 16px;
    font-weight: 500;
    color: #3d3d3d;
    line-height: 30px;
  }
  &-btn {
    margin-top: 20px;
    width: 240px;
    height: 44px;
    background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-shareTitle {
    font-size: 16px;
    font-weight: 500;
    color: #3d3d3d;
    line-height: 16px;
    margin-bottom: 34px;
  }
  &-shareBox {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: center;
    &-wx,
    &-friends {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 40px;
        height: 40px;
      }
      span {
        margin-top: 8px;
      }
    }
  }
}
</style>
